<template>
  <div class="app-container">
    <header class="page__header">
      <div class="page-actions">
        <div>工单模板</div>
      </div>
      <div class="step-tab">
        <div v-for="(item, index) in steps" :key="index" class="step" :class="[activeStep == item.key ? 'active' : '']"
             @click="changeSteps(item)">
          <span class="step-index">{{ index + 1 }}</span>
          {{ item.label }}
        </div>
        <div class="ghost-step step" :style="{ transform: translateX }"></div>
      </div>
      <div class="designer-actions">
        <el-button size="small" class="publish-btn" @click="close">返回</el-button>
        <el-button size="small" class="publish-btn" @click="publish">提交</el-button>
      </div>
    </header>
    <div class="form-main">
      <el-form ref="form" v-show="activeStep == 'basicSetting'" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="24" :xs="24">
            <el-form-item label="模板代码" prop="tempCode">
              <el-input v-model="form.tempCode" placeholder="请输入模板代码" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24">
            <el-form-item label="模板名称" prop="tempName">
              <el-input v-model="form.tempName" placeholder="请输入模板名称" :disabled="disabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入模板名称" :disabled="disabled"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <DynamicForm ref="formDesign"  v-show="activeStep == 'formDesign'" :conf="mockData.formData" tabName="formDesign"/>

  </div>
</template>

<script>
  import {getWorkOrderTemp, addWorkOrderTemp, updateWorkOrderTemp} from "@/api/workorder/workOrderTemp";
  import DynamicForm from "@/views/tool/build";

  export default {
    name: "WorkOrderTempFrom",
    components: {DynamicForm},
    data() {
      return {
        //是否禁用
        disabled: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        activeStep: 'basicSetting', // 激活的步骤面板
        steps: [
          { label: '基础设置', key: 'basicSetting' },
          { label: "表单设计", key: "formDesign" },
        ],
        mockData: {
          formData: {}
        }, // 可选择诸如 $route.param，Ajax获取数据等方式自行注入
      };
    },
    created() {

    },
    methods: {
      show(option) {
        this.reset();
        this.disabled = option.type == 'VIEW'
        if (option.type == 'ADD') {
          this.open = true;
          this.title = "新增工单模板";
        } else if (option.type == 'UPDATE' || option.type == 'VIEW') {
          getWorkOrderTemp(option.id).then(response => {
            this.form = response.data;

            if (option.type == 'VIEW') {
              this.title = "查看工单模板";
            } else {
              this.title = "修改工单模板";
            }
            this.open = true;
          });
        }
      },
      changeSteps(item) {
        this.activeStep = item.key;
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          tempCode: null,
          tempName: null,
          tempJson: null,
          tempVersion: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateWorkOrderTemp(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.cancel()
              });
            } else {
              addWorkOrderTemp(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.cancel()
              });
            }
          }
        });
      }
    }
  };
</script>
<style lang="stylus" scoped>
  $header-height = 54px;
  .page__header {
    width: 100%;
    height: $header-height;
    display flex;
    align-items center;
    justify-content center;
    justify-content: space-between;
    box-sizing: border-box;
    color: white;
    background: #3296fa;
    font-size: 14px;
    top: 0;

    .page-actions {
      height: 100%;
      text-align: center;
      line-height: $header-height;

      > div {
        height: 100%;
        padding-left: 20px;
        padding-right: 20px;
        display: inline-block;
      }

      i {
        font-size: 22px;
        vertical-align: middle;
      }
    }

    .step-tab {
      display: flex;
      justify-content: center;
      height: 100%;
      position: relative;

      > .step {
        width: 140px;
        line-height: $header-height;
        padding-left: 30px;
        padding-right: 30px;
        cursor: pointer;
        position: relative;

        &.ghost-step {
          position: absolute;
          height: $header-height;
          left: 0;
          z-index: -1;
          background: #4483f2;
          transition: transform .5s;

          &::after {
            content: '';
            border-width: 6px 6px 6px;
            border-style: solid;
            border-color: transparent transparent white;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -6px;
          }
        }

        &.active > .step-index {
          background: white;
          color: #4483f2;
        }

        > .step-index {
          display: inline-block;
          width: 18px;
          height: 18px;
          border: 1px solid #fff;
          border-radius: 8px;
          line-height: 18px;
          text-align: center;
          box-sizing: border-box;
        }
      }
    }
  }

  .publish-btn {
    margin-right: 20px;
    color: #3296fa;
    padding: 7px 20px;
    border-radius: 4px;
    font-size: 14px;
  }

  .form-main {
    width 40%;
    position: absolute;
    left: 0;
    right: 0;
    top: 90px;
    bottom: 0;
    margin: auto;
  }

</style>
